<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Home Page</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<style>
    body {
        width: 100%;
        background-color: #fafafa;
    }
    .header {
        width: 100%;
        line-height: 3rem;
        height: 3rem;
        color: #29b078;
        background-color: white;
        padding: 0 18%;
    }
    .contactus {
        float: right;
        width: 10rem;
        display: flex;
        justify-content: space-between;
        padding-top: 0.5rem;
    }
    .contactus span {
        width: 25px;
        height: 24px;
        background-image: url(img/sprites8.png);
    }
    .wechat {
        background-position: 0 0;
    }
    .qq {
        background-position: -25px 0;
    }
    .weibo {
        background-position: 0 -25px;
    }
    .navigation {
        padding: 0 18%;
        display: flex;
        justify-content: flex-end;
        width: 100%;
        height: 6rem;
        color: white;
        background-color: #29b078;
    }
    .navigation img {
        position: absolute; 
        left: 18%; 
        padding-top: 1rem;
    }
    .navigation span {
        padding: 2rem;
    }
    .main1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-image: url(img/bgi.png);
        background-size: cover;
        width: 100%;  
    }
    .main11 {
        text-align: right;
        padding:10vw 0vw;
        color: white;
    }
    .main1 button {
        color: gray;
        border: none;
        font-size: 8vw;
        background-color: transparent;
        margin: 5vw;
    }
    .main2 {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 8rem 18% 4rem 18%;
    }
    .main2 div {
        margin: 1.5vw;
        text-align: center;
        max-width: 14rem;
    }
    .main2 span {
        display: inline-block;
        width: 62px;
        height: 62px;
        background-image: url(img/sprites8.png);
    }
    .sprites01 {
        background-position: -50px 0;
    }
    .sprites02 {
        background-position: -117px 0;
    }
    .sprites03 {
        background-position: -188px 0;
    }
    .renshu {
        padding-top: 2.5rem;
    }
    .renshu span {
        vertical-align: middle;
        display: inline-block;
        width: 25px;
        height: 25px;
        background-image: url(img/sprites8.png);
    }
    .sprites04 {
        background-position: -25px -25px;
    }
    .main3 {
        width: 100%;
        text-align: center;
        padding: 4rem 18%;
    }
    .line1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        padding-top: 4rem;
    }
    .step1 {
        max-width: 16rem;
    }
    .sprites05 {
        float: left;
        display: inline-block;
        font-size: 2rem;
        line-height: 72px;
        width: 72px;
        height: 72px;
        color: #29b078;
        background-image: url(img/sprites8.png);
        background-position: -2px -66px;
    }
    .main31 {
        text-align: left;
        padding-top: 1rem;
        padding-left: 7rem;
        line-height: 1.5rem;
    }
    .sprites06 {
        display: inline-block;
        font-size: 2rem;
        line-height: 72px;
        width: 30px;
        height: 26px;
        color: #29b078;
        background-image: url(img/sprites8.png);
        background-position: -11px -150px;
    }
    .main4 {
        width: 100%;
        text-align: center;
        padding: 4rem 18%;
    }
    .exhibition {
        display: flex;
        justify-content: space-between;
        padding-top: 4rem;
    }
    .sudents {
        text-align: center;
        width: 18rem;
        border: 1px #eeeded solid;
        border-radius: 1rem;
        padding: 1rem;
        background-color: white;
    }
    .sudents div {
        display: inline-block;
        width: 108px;
        height: 108px;
        background-image: url(img/sprites8.png);
        padding: 2rem;
    }
    .sprites41 {
        background-position: 0 -277px;
    }
    .sprites42 {
        background-position: -113px -277px;
    }
    .sprites43 {
        background-position: 0 -390px;
    }
    .sprites44 {
        background-position: -113px -390px;
    }
    .main4 nav a {
        padding: 5px;
        background-color: #ddd;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
    .main5 {
        width: 100%;
        text-align: center;
        padding: 4rem 18%;
    }
    .main6 {
        width: 100%;
        text-align: center;
        padding: 4rem 18%;
        background-color: #fff;
    }
    .main6 ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .main6 ul li {
        margin: 0 1rem;
    }
    .footer {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 2rem 18%;
        color: white;
        background-color: #29b078;
        border: 1px #eeeded solid;
    }
    .footer1 {
        line-height: 5rem;
    }
    .footer2 {
        line-height: 3rem;
    }
    .footer0 {
        text-align: center;
        width: 100%;
        color: white;
        background-color: #29b078;
    }


/* 链接样式 */
    a {
        text-decoration: none;
        color: white;
    }
    a:hover {
        text-decoration: none;
        color: white;
    }
    .main5 a {
        color: black;
    }

/* 媒体查询 */
    @media all and (max-width: 450px) {
        .header {
            padding: 0 5%;
        }
        .navigation {
            padding: 0 5%;
        }
        .navigation span {
            padding: 2rem 1rem;
        }
        .main1 button {
            margin: 2vw;
        }
        .navigation img {
            padding-top: 2rem;
            width: 5rem;
            left: 5%; 
        }
        .line01 {
            display: none;
        }
        .main5 {
            padding: 4rem 5%;
        }
        .main6 {
            padding: 4rem 5%;
        }
        .footer {
            padding: 4rem 5%;
        }
    }
    @media all and (max-width: 1024px) {
        .sprites06 {
            display: none;
        }
        .exhibition {
            flex-wrap: wrap;
        }
    }

</style>

<body> 
    <div class="header">
        <div class="contactus">
            <span class="wechat"></span>
            <span class="qq"></span>
            <span class="weibo"></span>   
        </div>
        <p>客服热线：010-594-7634</p>  
    </div>
    <div class="navigation">
        <img src="img/logo.png" alt="logo">
        <span style="border-bottom: 0.5rem #ffffff solid;"><a href="home.html">首页</span></a>
        <span><a href="list.html">职业</a></span>
        <span><a href="cooperative.html">推荐</a></span>
        <span style="padding-right: 0;">关于</span>
    </div>
    <div class="main1">
        <button class="glyphicon glyphicon-menu-left" type="submit"></button>
        <div class="main11">
        <p style="font-size: 2.5vw;">你作为一个初级菜鸡，是否想要了解</p>
        <p><span style="font-size: 4vw;">50万</span><span style="font-size: 3vw; ">年薪的高级菜鸡，都会哪些技能呢？</span></p>
        </div>
        <button class="glyphicon glyphicon-menu-right" type="submit"></button>
    </div>
    <div class="main2">
        <div>
            <span class="sprites01"></span>
            <h5><strong>高效</strong></h5>
            <p style="text-align: left;">将五到七年的成长时间，缩短到一年到三年。</p>
        </div>
        <div>
            <span class="sprites02"></span>
            <h5><strong>规范</strong></h5>
            <p style="text-align: left;">标准的实战教程，不会走弯路。</p>
        </div>
        <div>
            <span class="sprites03"></span>
            <h5><strong>人脉</strong></h5>
            <p style="text-align: left;">同班好友，同院学长，技术大师，入学就深入脉圈，为以后铺平道路。</p>
        </div>
        <div class="line01" style="border-left: 1px #dedede dashed;"></div>
        <div class="renshu" style="text-align: left;">
            <span class="sprites04" style="color: #29b078;"></span>12400
            <p>累计在线学习人数</p>
            <span class="sprites04" style="color: #29b078;"></span>12400
            <p>学员已经找到满意工作</p>
        </div>
    </div>
    <div class="main3">
        <h5><strong>如何学习</strong></h5>
        <div class="line1">
            <div class="step1">
                <div class="sprites05">1</div>
                <div class="main31">匹配你现在的个人情况，寻找适合自己的岗位</div>
            </div>
            <div class="sprites06"></div>
            <div class="step1">
                <div class="sprites05">2</div>
                <div class="main31">了解职业前景薪金待遇、竞争压力等</div>
            </div>
            <div class="sprites06"></div>
            <div class="step1">
                <div class="sprites05">3</div>
                <div class="main31">掌握行业内顶级技能</div>
            </div>
            <div class="sprites06"></div>
            <div class="step1">
                <div class="sprites05">4</div>
                <div class="main31">查看职业目标任务</div>
            </div>
        </div>
        <div class="line1">
            <div class="step1">
                <div class="sprites05">5</div>
                <div class="main31">参考学习资源，掌握技能点，逐个完成任务</div>
            </div>
            <div class="sprites06"></div>
            <div class="step1">
                <div class="sprites05">6</div>
                <div class="main31">加入班级，和小伙伴们互帮互助，一块学习</div>
            </div>
            <div class="sprites06"></div>
            <div class="step1">
                <div class="sprites05">7</div>
                <div class="main31">选择导师，一路引导，加速自己成长</div>
            </div>
            <div class="sprites06"></div>
            <div class="step1">
                <div class="sprites05">8</div>
                <div class="main31">完成职业技能，升级业界大牛</div>
            </div>
        </div>
    </div>
    <div class="main4">
        <h5><strong>优秀学员展示</strong></h5>
        <div class="exhibition">
            <div class="sudents">
                <div class="sprites41"></div>
                <h5><strong>技术顾问：罗大佑</strong></h5>
                <p style="text-align: left;">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
            </div>
            <div class="sudents">
                <div class="sprites42"></div>
                <h5><strong>技术顾问：罗二佑</strong></h5>
                <p style="text-align: left;">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
            </div>
            <div class="sudents">
                <div class="sprites43"></div>
                <h5><strong>技术顾问：罗三佑</strong></h5>
                <p style="text-align: left;">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
            </div>
            <div class="sudents">
                <div class="sprites44"></div>
                <h5><strong>技术顾问：罗四佑</strong></h5>
                <p style="text-align: left;">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
            </div>
        </div>
        <nav>
            <ul class="pager">
              <li><a href="#"></a></li>
              <li><a href="#"></a></li>
              <li><a href="#"></a></li>
              <li><a href="#"></a></li>
            </ul>
        </nav>
    </div>
    <div class="main5">
        <h5><strong><a href="cooperative.html">战略合作企业</a></strong></h5>
        <img src="img/company.png" style="width: 100%; padding-top: 4rem;">
    </div>
    <div class="main6">
        <h5 style="padding-bottom: 1rem;"><strong>友情链接</strong></h5>
        <ul>
            <li>手机软件</li>
            <li>教师招聘</li>
            <li>找工作</li>
            <li>手机软件</li>
            <li>教师招聘</li>
            <li>找工作</li>
            <li>手机软件</li>
            <li>教师招聘</li>
            <li>找工作</li>
        </ul>
        <ul>
            <li>手机软件</li>
            <li>教师招聘</li>
            <li>找工作</li>
            <li>手机软件</li>
            <li>教师招聘</li>
            <li>找工作</li>
            <li>手机软件</li>
            <li>教师招聘</li>
            <li>找工作</li>
        </ul>
    </div>
    <div class="footer">
        <div class="footer1">
            <p>技能树——改变你我</p>
            <p>关于我们 | 联系我们 | 合作企业</p>
        </div>
        <div class="footer2">
            <p>旗下网站</p>
            <p>草船云孵化器 &nbsp;&nbsp; 最强IT特训营</p>
            <p>葡萄藤轻游戏 &nbsp;&nbsp; 桌游精灵</p>
        </div>
        <div class="footer3">
            <p>微信公众平台</p>
            <img src="img/ewm.png">
        </div>
    </div>
    <div class="footer0">
        <p> © 2015技能树 www.jnshu.com  All Rights Reserved | 京ICP备13005880号</p>
    </div>
    <script src="js/jquery-3.5.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>